<template>
  <div>
    <el-dialog
      @closed="handleClose"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      title="编辑设备组"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible.sync="showDialog"
      :append-to-body="true"
    >
      <el-tabs :tab-position="tabPosition" class="tabGroupHight">
        <el-tab-pane label="详情">
          <el-form
            :model="deviceGroupForm"
            :rules="deviceGroupRules"
            ref="deviceGroupForm"
            size="mini"
            label-width="80px"
            class="tabHight_auto"
          >
            <el-form-item label="Token:" prop="token">
              <el-input
                disabled
                v-model="deviceGroupForm.token"
                placeholder="请输入token"
              ></el-input>
            </el-form-item>

            <el-form-item label="名称:" prop="name">
              <el-input
                v-model="deviceGroupForm.name"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="描述:" prop="description">
              <el-input
                type="textarea"
                rows="5"
                v-model="deviceGroupForm.description"
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>
            <!-- 
            <el-form-item label="添加角色:">
              <el-input
                v-model="newRoles"
                placeholder="请输入角色"
                style="width: 60.5%; float: left; margin-top: 1px"
              ></el-input>
              <el-button
                class="addbutton"
                size="mini"
                @click.prevent.stop="onRolesAdded()"
                ><i class="el-icon-plus"></i>添加</el-button
              >
            </el-form-item>
            <el-form-item>
              <div class="div-role" v-if="editedRoles.length > 0">
                <div class="div-inline" v-for="role in editedRoles" :key="role">
                  {{ role
                  }}<span
                    class="el-icon-close"
                    style="margin-left: 6px; cursor: pointer"
                    @click.prevent.stop="onRoleDeleted(role)"
                  />
                </div>
              </div>
            </el-form-item> -->
            <el-form-item label="图像:" prop="imageUrl">
              <div style="display: flex">
                <app-upload
                  tips=""
                  style="width: 100px; heigh: 100px; margin-right: 22px"
                  :is-resolution="true"
                  @subUploadSucceed="handleUploadSucceed"
                />
                <div class="imageHome">
                  <img
                    v-if="deviceGroupForm.imageUrl"
                    :src="deviceGroupForm.imageUrl | filtersFileUrl()"
                    class="image-size"
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="元数据" prop="metadata">
          <metaData
            :editmetaData="editmetaData"
            :isedit="isedit"
            @sendmetaDatas="sendmetaData"
            ref="editmetaData"
          />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showDialog = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="submitForm('deviceGroupForm')"
          :loading="btnLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaData from "../../opensite/metaData.vue";
import AppUpload from "./UploadImage";
import { TOKEN_RULES } from "@/utils/local";
import { getDeviceGroupDetails, putDeviceElements } from "@/api/deviceGroup";
export default {
  props: {
    editdGroupShow: {
      type: Boolean,
      default: false,
    },
    deviceGroupToken: {
      type: String,
      default: "",
    },
  },
  components: {
    MetaData,
    AppUpload,
  },
  data() {
    return {
      btnLoading: false,
      url: "",
      showDialog: false,
      tabPosition: "left",
      token: this.deviceGroupToken,
      deviceGroupForm: {
        token: "",
        imageUrl: "",
        name: "",
        description: "",
        metadata: {},
        roles: [],
      },
      deviceGroupRules: {
        token: TOKEN_RULES,
        name: [
          { required: true, message: "请输入设备组名称", trigger: "blur" },
        ],
        imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
      isedit: true, //true为编辑页进入，false为添加页进入
      editmetaData: {},
      metaDataJson: {},
      newRoles: "",
      editedRoles: [],
    };
  },
  mounted() {},
  watch: {
    editdGroupShow(newValue, oldValue) {
      this.showDialog = newValue;
    },
  },
  methods: {
    //弹窗打开执行操作
    handleOpen() {
      this.getDeviceGroupByToken();
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      var param = { isRefresh: isRefresh, deviceGroupToken: this.token };
      this.$emit("changeShow", param);
    },
    // 提交
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {};
          formData = Object.assign({}, this.deviceGroupForm);
          let metaDataTemp = this.$refs.editmetaData.metaDataJson;
          metaDataTemp =
            Object.keys(metaDataTemp).length > 0
              ? metaDataTemp
              : this.metaDataJson;
          formData.metadata = metaDataTemp;
          formData.roles = [...this.editedRoles];
          this.btnLoading = true;
          putDeviceElements(formData, this.token)
            .then((res) => {
              this.token = this.deviceGroupForm.token;
              this.$msg({
                message: "操作成功!",
                type: "success",
              });
              this.showDialog = false;
              this.handleClose(true);
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },
    onRolesAdded() {
      if (this.newRoles == "") {
        return;
      }
      let roles = this.newRoles.split(" ");
      roles.forEach((role) => {
        if (this.editedRoles.indexOf(role) === -1) {
          this.editedRoles.push(role);
        }
      });
      this.newRoles = "";
    },
    onRoleDeleted(role) {
      let roles = this.editedRoles;
      let index = roles.indexOf(role);
      if (index !== -1) {
        roles.splice(index, 1);
      }
    },
    handleUploadSucceed(url) {
      this.deviceGroupForm.imageUrl = url;
    },
    getDeviceGroupByToken() {
      var that = this;
      getDeviceGroupDetails(this.deviceGroupToken).then((res) => {
        const r = res.data;
        that.deviceGroupForm.token = r.token;
        that.deviceGroupForm.name = r.name;
        that.deviceGroupForm.imageUrl = r.imageUrl;
        that.deviceGroupForm.description = r.description;
        that.editmetaData = r.metadata;
        that.editedRoles = r.roles;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.tabGroupHight {
  height: 430px;
  overflow: auto;
}
.addbutton {
  background-color: #2680d2;
  color: #ffffff;
  margin-left: 10px;
}
.el-icon-plus {
  color: #ffffff;
}
.div-role {
  width: 75%;
  background: rgba(233, 233, 233, 0.3);
  min-height: 42px;
  padding: 0 0 5px 5px;
  display: flex;
  flex-wrap: wrap;
}
.div-inline {
  display: inline;
  background-color: #e4e4e4;
  padding: 2px;
  line-height: 25px;
  margin: 5px 5px 0 0;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  word-wrap: break-word;
}
.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;
  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}

div /deep/.el-dialog {
  margin: 0 auto !important;
  top: 50%;
  transform: translateY(-50%);
  /deep/.el-dialog__header {
    background: #f7f7f7;
    text-align: left;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
}
</style>
